<template>
  <window
    ref="win"
    title="设置统计"
  >
    <div
      v-loading="tLoading"
      element-loading-text="拼命加载中"
    >
      <div>
        <el-select
          v-model="areaTeamId"
          @change="loadPeriodData"
        >
          <el-option
            v-for="(item, index) in areaTeams"
            :key="index"
            :value="item.value"
            :label="item.text"
          ></el-option>
        </el-select>
        <el-select v-model='periodId'>
          <el-option
            v-for="(item, index) in periods"
            :key="index"
            :value="item.value"
            :label="item.text"
          ></el-option>
        </el-select>
        <el-select v-model='type'>
          <el-option
            value="1"
            label="双向剔除"
          ></el-option>
          <el-option
            value="2"
            label="单向剔除"
          ></el-option>
        </el-select>
      </div>
      <div class="elTransfer">
        <el-transfer
          filterable
          v-model="filterList"
          :titles="['统计', '不统计']"
          :button-texts="['到左边', '到右边']"
          :data="filterData"
        >
        </el-transfer>
      </div>
      <div class="f_filterButtons">
        <el-button @click="saveFilter">确定</el-button>
        <el-button @click="modalClose">取消</el-button>
      </div>
    </div>

  </window>
</template>
<script>
import io from '../../lib/io'
export default {
  data() {
    return {
      areaTeamId: '',
      periods: [],
      periodId: '',
      filterList: [],
      filterData: [],
      courseList: [],
      tLoading: false,
      type: '1'
    }
  },
  props: ['resourceId'],
  computed: {
    areaTeams: function() {
      var options = (this.$root.config.areaTeams || []).map(function(item) {
        return { value: item.areaTeamId, text: item.name }
      })
      return options
    }
  },
  watch: {
    periodId: function() {
      if (!this.periodId) {
        return
      }
      this.tLoading = true
      this.getCourseClassList().then(() => {
        this.filterData = []
        this.filterList = []
        this.getFilteredCourse()
      })
    },
    type: function() {
      if (!this.periodId) {
        return
      }
      this.tLoading = true
      this.getCourseClassList().then(() => {
        this.filterData = []
        this.filterList = []
        this.getFilteredCourse()
      })
    }
  },
  methods: {
    modalClose() {
      this.$refs.win.close()
    },
    saveFilter() {
      let periodConfigs = []
      this.filterList.forEach(item => {
        periodConfigs.push(this.courseList[item])
      })
      let tempPeriod = {}
      if (periodConfigs.length > 0) {
        periodConfigs.forEach(pItem => {
          if (tempPeriod[pItem.periodId]) {
            tempPeriod[pItem.periodId].config.excludeClassIds.push(
              pItem.classId
            )
          } else {
            tempPeriod[pItem.periodId] = {
              config: {
                excludeClassIds: [pItem.classId]
              },
              periodId: pItem.periodId,
              type: this.type
            }
          }
        })
      } else {
        tempPeriod[this.periodId] = {
          config: {
            excludeClassIds: []
          },
          periodId: this.periodId,
          type: this.type
        }
      }

      this.tLoading = true
      io.postPlayload(
        io.saveReportConfigs,
        {
          periodConfigs: [{ ...tempPeriod[this.periodId] }],
          resourceId: this.resourceId
        },
        res => {
          this.tLoading = false
          if (res.success) {
            this.modalClose()
          }
        }
      )
    },
    show() {
      this.$refs.win.show({
        width: 1000,
        height: 600
      })
    },
    getCourseClassList() {
      let action = {}
      io.post(
        io.findUseCourseListByPeriodIds,
        {
          periodIds: this.periodId,
          type: this.type
        },
        res => {
          if (res.success) {
            if (res.data) {
              this.courseList = res.data[this.periodId]
            }

            action.resolve()
          }
        }
      )
      return new Promise((resolve, reject) => {
        action = {
          resolve,
          reject
        }
      })
    },
    getFilteredCourse() {
      io.post(
        io.findClassReportConfigs,
        {
          periodIds: this.periodId,
          resourceId: this.resourceId,
          type: this.type
        },
        res => {
          if (res.success) {
            this.tLoading = false
            let length = this.courseList.length
            let hasFilterData = res.data.map(item => {
              return item.courseClassList
            })
            hasFilterData = Array.prototype.concat.apply([], hasFilterData)
            let tempData = []
            let tempList = this.courseList
            tempList.forEach((tItem, index) => {
              hasFilterData.forEach(hItem => {
                if (tItem.classId === hItem.classId) {
                  this.filterList.push(index)
                }
              })
              tempData.push({
                key: index,
                label: `${tItem.gradeName}_${tItem.subjectName}_${
                  tItem.busTeamName
                }_${tItem.className}`
              })
            })
            this.filterData = tempData
          } else {
            this.tLoading = false
          }
        }
      )
    },
    loadPeriodData() {
      this.periodId = ''
      this.filterList = []
      this.filterData = []
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.areaTeamId
        },
        ret => {
          if (ret.success) {
            this.periods = ret.data.map(item => {
              return { value: item.periodId, text: item.periodName }
            })
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    }
  }
}
</script>
<style lang="less">
.elTransfer {
  margin: 30px 0;
  .el-checkbox__input {
    left: 0;
  }
  .el-transfer-panel__item {
    display: block;
    margin-left: 15px;
  }
  .el-checkbox__label {
    margin: 0 !important;
    padding: 0 !important;
  }
  .el-transfer-panel {
    overflow: hidden;
    width: 400px;
  }
  .el-transfer-panel__body {
    height: 600px;
  }
  .el-transfer-panel__list {
    height: 100%;
  }
}
</style>
